<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Tour with Google Maps and Flickr </title>
<meta name="Generator" content="EditPlus" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="Keywords" content="Tour, Google Maps ,Flickr" />
<meta name="Description" content="Tour with Google Maps and Flickr" />
<style type="text/css" media="screen">
<!--
html,body{height:100%;margin:0;padding:0;font:12px/1.6em arial;color: #555;}
#over{position: absolute; top:3px;right:3px;width:165px;background: #fff;z-index:999;padding:5px;border: 1px solid #369;}
#map{width:100%;height:635px;margin:0;padding:0;}
img{border:0;}
a:link{ color:#369;text-decoration:none;}
a:visited{ color:#888;text-decoration:none;}
a:hover{ color:#f00; text-decoration:underline;}
a:active{ color:#fc0; text-decoration:none;}
p{margin:7px 0;}
h1,h2{margin:0 0 3px;font: bold 14px/1.6em verdana;text-transform:capitalize; color: #f60;border-bottom: 1px solid #ccc;}
h2{font-size:12px;padding:0 5px;text-align: center;}
h2 span{padding:6px 0 3px;display: block;font:12px arial;color: #444;}
h3{margin:0;padding:9px 0 0;font: 12px/1.6em sans-serif;padding-top:3px;}
#iw{}
.ci{text-align: center;width:300px;height:280px;position: relative;}
#message{padding:6px 0 0;color: red;}
#pr{position: absolute; top:80px;right:0;cursor:pointer;}
#nt{position: absolute; top:80px;left:0;cursor:pointer;}
#fpc{position: absolute; top:14px;left:25px;width:250px;text-align: center;background: url(loading.gif) no-repeat center center;}
#fpc a img{border: 1px solid #ccc;padding:2px;}
#fpc a:hover img{border: 1px solid #fc0;}
.aut{color: #333;}
.ff{display: none;}
#wel{width:250px;padding-top:11px;text-align:justify;text-justify:distribute-all-lines;text-justify:inter-ideograph;}
#cboMap1{color: #000;margin:0;padding:0;}
#cboMap1 li{width:30px;float: left;background: #fff;border: 1px solid #666;padding:1px 10px;cursor:pointer;*padding:2px 10px 1px;text-align: center;list-style:none;margin:0;}
#cboMap1 li.on{background: #eee;font-weight:bold;border: 1px solid #000;}
-->
</style>
<script type="text/javascript" src="http://ditu.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAACZoLVN79WT2mXp8M7Dsi-hSVbq8cAqMDJReYWuWY3FAJPhxoRBTRhRCgpQhnPbuLwfaAbgqLte5Baw" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript" src="js/ruler.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function(){new tour()};

var map=null;

function tour() {
	if (GBrowserIsCompatible()) {
	    var ct = $('#map')[0];
		map  = new GMap2(ct);
		var point = new GLatLng(39.917,116.397);
		map.setCenter(point, 3);
		map.setMapType(G_SATELLITE_MAP);
		map.addControl(new GOverviewMapControl());
		map.addControl(new GScaleControl());
		map.enableScrollWheelZoom();
		map.enableContinuousZoom();
		map.enableDoubleClickZoom();
		map.addControl(new GRulerControl());
		var mapTp = new mapT();
		var tl = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(9,9));
		map.addControl(mapTp,tl);
		var mapTz = new GLargeMapControl();
		var tlz = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,40));
		map.addControl(mapTz,tlz);
		map.openInfoWindowHtml(point,'<div id="wel">请在右侧输入关键词，可以看到一种出人意料的地图和照片的混合。<p>因为我们是把flickr上tag为你输入的关键字的照片取过来，显示在地图上的你输入的地方，因此不可能所有照片真的是在那个地方拍的或那个地方的风景。</p></div>');
	}

	this.cSubmit = $("#gbt")[0],
	this.cInput = $("#loc")[0],
	this.cError = $("#message")[0];

	this.cInput.onfocus = function(){
		if(this.value=="请输入地名"){this.value="";}else this.select();
	}
	this.cInput.onblur = function() {
		if (this.value == "") { this.value = "请输入地名";}
	}

	this.cSubmit.onclick = this.fly;

}

tour.prototype.fly = function(){
	var geocoder = new GClientGeocoder(),
		gwfIcon = new GIcon(G_DEFAULT_ICON);
	gwfIcon.image = "gwf.png";

	if($("#wel")[0]){
	  $("#wel")[0].innerHTML = "Loading data from Flickr.com...";
	}
	if($("#iw")[0]){
	  $("#iw")[0].innerHTML = "Loading data from Flickr.com...";
	}

	//load data(json)
	var _address = encodeURIComponent($("#loc")[0].value);
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=" + _address + "&format=json&jsoncallback=?",
	  function(data){
		var photo = data,
			photos= photo.items.length,
			ps = 0;
			phod = [];
		if(!photos || photos===0){
			if($("#wel")[0]){
			  $("#wel")[0].innerHTML = "Flickr.com 没有标记为 <strong>" + $("#loc")[0].value + "</strong>的图片...";
			}
			if($("#iw")[0]){
			  $("#iw")[0].innerHTML = "Flickr.com 没有标记为 <strong>" + $("#loc")[0].value + "</strong>的图片...";
			}
		  return;
		}
		for(var k=0;k<photos;k++){
			phod[k] = new Image; 
			phod[k].src=photo.items[k].media.m;
		}
		geocoder.getLatLng(
		  $("#loc")[0].value,
		  function(point) {
			if (!point) {
			   $("#message")[0].innerHTML = "对不起 无法解析 <strong>" + $("#loc")[0].value + "</strong>!";
			} else {
			  $("#message")[0].innerHTML = "";
			  map.setCenter(point,10);
			  var marker = new GMarker(point,{icon:gwfIcon});
				  map.clearOverlays();
				  map.addOverlay(marker);
			  var chart = '<div id="iw">' +
							'<h2><span>Flickr.com上标记为 <a href="http://www.flickr.com/search/?q=' + _address + '&m=tags" target="_blank">' + $("#loc")[0].value + '</a>('+photos+')的图片</span> </h2>' +
							'<div class="ci"><img src="pr.png" id="pr" alt="下一张"><div id="fpc"><h3 id="h3t">' + photo.items[ps].title + '</h3><a href="' + photo.items[ps].link + '" target="_blank"><img id="fp" src="' + photo.items[ps].media.m + '" alt="photo from flickr.com" /></a></div><img src="nt.png" id="nt" alt="上一张"></div>' +
						  '</div>';
			  map.openInfoWindowHtml(point,chart);


			  var pr = $("#pr")[0],
				  nn = $("#nt")[0],
				  fp = $("#fp")[0],
				  h3t= $("#h3t")[0];
			  if(nn){
			   nn.onclick = function(){
				if(ps<photos-1){
					ps = ps+1;
				}else {
					ps=0;
				}
				$("#fpc").html('<h3 id="h3t">' + photo.items[ps].title + '</h3><a href="' + photo.items[ps].link + '" target="_blank"><img id="fp" src="' + photo.items[ps].media.m + '" alt="photo from flickr.com" class="ff" /></a>');
				$("#fp").fadeIn();
			   }
			  }

			  if(pr){
			   pr.onclick = function(){
				if(ps>0){
					ps = ps-1;
				}else {
					ps=photos-1;
				}
				$("#fpc").html('<h3 id="h3t">' + photo.items[ps].title + '</h3><a href="' + photo.items[ps].link + '" target="_blank"><img id="fp" src="' + photo.items[ps].media.m + '" alt="photo from flickr.com" class="ff" /></a>');
				$("#fp").fadeIn();
			   }
			  }


			}
		  }
		);
	});

}
//custom mapType change button
function mapT() { }

mapT.prototype = new GControl();

mapT.prototype.initialize = function(map) {
    var container = document.createElement("div");

	var mtype = document.createElement("div");
    container.appendChild(mtype);
	var tst = '<ul id="cboMap1"><li title="地图视图" id="tMap">地图</li><li title="卫星视图" class="on" id="tSet">卫星</li></ul>';
    mtype.innerHTML = tst;
  
    map.getContainer().appendChild(container);
	
	document.getElementById("tMap").onclick = function(){
		map.setMapType(G_NORMAL_MAP);
		document.getElementById("tSet").className = "";
		this.className = "on";
	}
	document.getElementById("tSet").onclick = function(){
		map.setMapType(G_SATELLITE_MAP);
		document.getElementById("tMap").className = "";
		this.className = "on";
	}
    return container;
  }

mapT.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5));
  }
//]]>
</script>
</head>
<body>
	<div id="map"></div>
	<div id="over">
		<h1>地图上的风景</h1>
		<p>输入国家/城市/地名 限一个词</p>
		<input type="text" id="loc" size="14" name="Place" value="鸟巢" />
		<input type="submit" id="gbt" value="Go!" />
		<div id="message"></div>
	</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5029727-1");
pageTracker._trackPageview();
</script>
</body>
</html>